<template>
  <div class="nurse-center">
    <el-row :gutter="20">
      <!-- 个人信息卡片 -->
      <el-col :span="8">
        <el-card class="profile-card">
          <div class="profile-header">
            <el-avatar :size="80" :src="userInfo.avatar" />
            <div class="info">
              <h3>{{ userInfo.name }}</h3>
              <p>{{ userInfo.title }}</p>
            </div>
          </div>
          <div class="profile-content">
            <p><el-icon><Phone /></el-icon> {{ userInfo.phone }}</p>
            <p><el-icon><Location /></el-icon> {{ userInfo.area }}</p>
            <p><el-icon><Medal /></el-icon> 服务评分：{{ userInfo.rating }}分</p>
          </div>
          <div class="profile-footer">
            <el-button type="primary" @click="editProfile">编辑资料</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 数据统计卡片 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="data-card">
              <template #header>
                <div class="card-header">
                  <span>本月订单</span>
                </div>
              </template>
              <div class="card-body">
                <div class="number">{{ statistics.monthlyOrders }}</div>
                <div class="compare">
                  较上月 <span class="up">+12.5%</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="data-card">
              <template #header>
                <div class="card-header">
                  <span>本月收入</span>
                </div>
              </template>
              <div class="card-body">
                <div class="number">¥{{ statistics.monthlyIncome }}</div>
                <div class="compare">
                  较上月 <span class="up">+8.3%</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="data-card">
              <template #header>
                <div class="card-header">
                  <span>好评率</span>
                </div>
              </template>
              <div class="card-body">
                <div class="number">{{ statistics.satisfactionRate }}%</div>
                <div class="compare">
                  较上月 <span class="up">+2.1%</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 近期订单 -->
        <el-card class="recent-orders" style="margin-top: 20px;">
          <template #header>
            <div class="card-header">
              <span>近期订单</span>
              <el-button type="primary" link @click="viewAllOrders">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="patientName" label="患者姓名" width="120" />
            <el-table-column prop="phone" label="联系电话" width="150" />
            <el-table-column prop="hospital" label="医院" />
            <el-table-column prop="department" label="科室" width="120" />
            <el-table-column prop="serviceTime" label="服务时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Phone, Location, Medal } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios' // 引入 axios
import {ip} from '@/router/ip.js'

const router = useRouter()

// 个人信息
const userInfo = ref({})

// 统计数据
const statistics = ref({
  monthlyOrders: 28,
  monthlyIncome: 5680,
  satisfactionRate: 98
})

// 近期订单
const recentOrders = ref([]) // 初始化为空数组

// 编辑资料
const editProfile = () => {
  router.push('/nurse/profile')
}

// 查看全部订单
const viewAllOrders = () => {
  router.push('/nurse/orders')
}

// 获取陪诊师信息
const fetchNurseInfo = async () => {
    // 从登录信息中获取陪诊师的ID
    const caregiverId = localStorage.getItem('caregiverId') // 从 localStorage 中获取陪诊师ID
    console.log('从 localStorage 中获取的陪诊师ID:', caregiverId) // 添加日志
    if (!caregiverId) {
      ElMessage.error('未找到陪诊师ID，请重新登录或联系管理员')
      throw new Error('未找到陪诊师ID')
    }

    // 使用完整的后端地址
    const response = await fetch(`http://${ip}:8000/api/getCaregiverById?caregiverid=${caregiverId}`)
    if (!response.ok) {
      throw new Error('获取陪诊师信息失败')
    }
    const data = await response.json()

    // 将获取到的数据映射到 userInfo
    userInfo.value = {
      name: data.name,
      title: '高级陪护师', // 这里假设 title 固定为高级陪护师，可根据实际情况修改
      avatar: data.avater,
      phone: data.phone,
      area: data.address,
      rating: 4.8 // 这里假设 rating 固定为 4.8，可根据实际情况修改
    }
}

// 获取近期订单
const fetchRecentOrders = async () => {
    const caregiverId = localStorage.getItem('caregiverId')
    if (!caregiverId) {
      ElMessage.error('未找到陪诊师ID，请重新登录或联系管理员')
      return
    }

    // 调用后端接口获取订单数据
    const response = await axios.get(`http://${ip}:8000/api/getMyOrders`, {
      params: {
        caregiverId,
        page: 1,
        pageSize: 5 // 假设只展示最近的5条订单
      }
    })

    // 将获取到的订单数据映射到 recentOrders，并截取前两条
    recentOrders.value = response.data.slice(0, 2).map(order => ({
      patientName: order.name, // 患者姓名
      phone: order.phone, // 联系电话
      hospital: order.hospital, // 医院
      department: order.department, // 科室
      serviceTime: `${(order.time / 3600).toFixed(0)} 小时` // 服务时间，加上“小时”后缀
    }))
}

onMounted(() => {
  fetchNurseInfo()
  fetchRecentOrders() // 在组件挂载时获取近期订单
})
</script>

<style scoped lang="scss">
.nurse-center {
  .profile-card {
    .profile-header {
      text-align: center;
      padding: 20px 0;

      .info {
        margin-top: 15px;

        h3 {
          margin: 0;
          font-size: 18px;
        }

        p {
          margin: 5px 0 0;
          color: #909399;
        }
      }
    }

    .profile-content {
      padding: 20px 0;
      border-top: 1px solid #ebeef5;

      p {
        margin: 10px 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #606266;

        .el-icon {
          color: #909399;
        }
      }
    }

    .profile-footer {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid #ebeef5;
    }
  }

  .data-card {
    .card-body {
      text-align: center;
      padding: 10px 0;

      .number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 10px;
      }

      .compare {
        font-size: 14px;
        color: #909399;

        .up {
          color: #67c23a;
        }

        .down {
          color: #f56c6c;
        }
      }
    }
  }

  .recent-orders {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>